<template>
  <div>
    <el-card>
      <el-row>
        <el-col :span="8">
          <span>一级分类：</span>
          <el-select style="width: 200px;" @change="handleChange1" :disabled="props.scene===1" v-model="categroyStore.c1Id" placeholder="请选择">
            <el-option v-for="item in categroyStore.c1Arr" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-col>
        <el-col :span="8">
          <span>二级分类：</span>
          <el-select style="width: 200px;" @change="handleChange2" :disabled="!categroyStore.c1Id || props.scene===1" v-model="categroyStore.c2Id" placeholder="请选择">
            <el-option v-for="item in categroyStore.c2Arr" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-col>
        <el-col :span="8">
          <span>三级分类：</span>
          <el-select style="width: 200px;" :disabled="!categroyStore.c2Id || props.scene===1" v-model="categroyStore.c3Id" placeholder="请选择">
            <el-option v-for="item in categroyStore.c3Arr" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { onMounted, defineProps } from 'vue'
import useCategoryStore from '@/store/modules/category'
let categroyStore = useCategoryStore()
let props = defineProps(['scene'])
onMounted(() => {
    getC1()
})
  const getC1 = () => {
    categroyStore.getC1()
  }
  const handleChange1 = (e: number | string) =>  {
    categroyStore.c2Id = ''
    categroyStore.c3Id = ''
    e && categroyStore.getC2()
  }
  const handleChange2 = (e: number | string) =>  {
    categroyStore.c3Id = ''
    e && categroyStore.getC3()
  }
</script>
<style scoped lang="scss">
</style>
